﻿<h2>Your Cart</h2>

<div class="panel panel-primary">
    <table class="table">
        <thead>
            <tr>
                <th>Quantity</th>
                <th>Item</th>
                <th>Price</th>
                <th class="text-right">Subtotal</th>
                <td></td>
            </tr>
        </thead>
        <tbody data-bind="foreach: customerModel.cart()">
            <tr>
                <td data-bind="text: $data.count"></td>
                <td data-bind="text: $data.product.Name"></td>
                <td data-bind="text: '$' + $data.product.Price.toFixed(2)"></td>
                <td class="text-right"
                    data-bind="text: '$'
                        + ($data.count * $data.product.Price).toFixed(2)"></td>
                <td>
                    <button class="btn btn-xs btn-danger"
                            data-bind="click: removeFromCart.bind($data)">
                        Remove
                    </button>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2"></td>
                <td>Total:</td>
                <th class="text-right"
                    data-bind="text: '$' + customerModel.cartTotal().toFixed(2)"></th>
            </tr>
        </tfoot>
    </table>
</div>

<div class="text-center">
    <button class="btn btn-primary"
            data-bind="click: setView.bind($data, 'list')">
        Continue Shopping
    </button>
    <button class="btn btn-primary"
            data-bind="click: setView.bind($data, 'checkout'),
                enable: customerModel.cartCount() > 0">
        Check Out
    </button>
</div>

